<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 测试页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .response-area {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            white-space: pre-wrap;
        }
        .api-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>API 测试页面</h1>
        
        <!-- 登录测试 -->
        <div class="api-section">
            <h3>1. 登录测试 (/api/auth/login)</h3>
            <div class="mb-3">
                <label class="form-label">用户名</label>
                <input type="text" class="form-control" id="loginUsername" value="sam">
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <input type="password" class="form-control" id="loginPassword" value="123456">
            </div>
            <button class="btn btn-primary" onclick="testLogin()">测试登录</button>
            <div class="mt-3">
                <strong>响应结果：</strong>
                <div id="loginResponse" class="response-area">等待测试...</div>
            </div>
        </div>

        <!-- 获取用户信息测试 -->
        <div class="api-section">
            <h3>2. 获取用户信息 (/api/auth/me)</h3>
            <button class="btn btn-primary" onclick="testGetUserInfo()">获取用户信息</button>
            <div class="mt-3">
                <strong>响应结果：</strong>
                <div id="userInfoResponse" class="response-area">等待测试...</div>
            </div>
        </div>

        <!-- 获取客户列表测试 -->
        <div class="api-section">
            <h3>3. 获取客户列表 (/api/customers/)</h3>
            <button class="btn btn-primary" onclick="testGetCustomers()">获取客户列表</button>
            <div class="mt-3">
                <strong>响应结果：</strong>
                <div id="customersResponse" class="response-area">等待测试...</div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // API 配置
        const API_CONFIG = {
            BASE_URL: 'http://erpapi.hkpublicholiday.com',
            TOKEN_KEY: 'api_test_token'
        };

        // 创建 axios 实例
        const apiClient = axios.create({
            baseURL: API_CONFIG.BASE_URL,
            timeout: 30000,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });

        // 请求拦截器
        apiClient.interceptors.request.use(
            (config) => {
                const token = localStorage.getItem(API_CONFIG.TOKEN_KEY);
                if (token) {
                    config.headers['Authorization'] = `Bearer ${token}`;
                }
                return config;
            },
            (error) => {
                return Promise.reject(error);
            }
        );

        // 工具函数：格式化响应显示
        function formatResponse(response) {
            return JSON.stringify(response, null, 2);
        }

        // 工具函数：显示响应结果
        function showResponse(elementId, data, isError = false) {
            const element = document.getElementById(elementId);
            element.style.color = isError ? 'red' : 'black';
            element.textContent = formatResponse(data);
        }

        // 1. 测试登录
        async function testLogin() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;

            try {
                // 构建 FormData
                const formData = new URLSearchParams();
                formData.append('username', username);
                formData.append('password', password);

                const response = await apiClient.post('/api/auth/login', formData);
                
                // 保存 token
                if (response.data.access_token) {
                    localStorage.setItem(API_CONFIG.TOKEN_KEY, response.data.access_token);
                }

                showResponse('loginResponse', {
                    status: response.status,
                    data: response.data
                });
            } catch (error) {
                showResponse('loginResponse', {
                    error: error.message,
                    response: error.response?.data
                }, true);
            }
        }

        // 2. 测试获取用户信息
        async function testGetUserInfo() {
            try {
                const response = await apiClient.get('/api/auth/me');
                showResponse('userInfoResponse', {
                    status: response.status,
                    data: response.data
                });
            } catch (error) {
                showResponse('userInfoResponse', {
                    error: error.message,
                    response: error.response?.data
                }, true);
            }
        }

        // 3. 测试获取客户列表
        async function testGetCustomers() {
            try {
                const response = await apiClient.get('/api/customers/');
                showResponse('customersResponse', {
                    status: response.status,
                    data: response.data
                });
            } catch (error) {
                showResponse('customersResponse', {
                    error: error.message,
                    response: error.response?.data
                }, true);
            }
        }
    </script>
</body>
</html> 